<script setup lang="ts" name="News">
import { onMounted, onUnmounted, reactive } from 'vue'
import axios from 'axios'
import { nanoid } from 'nanoid'
import { sleep } from '@/utils/Utils.ts'

// // 休眠函数，可以封装成工具
// function sleep(ms: number): Promise<void> {
//   return new Promise((resolve) => setTimeout(resolve, ms))
// }

// 挂载，使用await的话，必须结合async使用
onMounted(async () => {
  console.log('组件挂载了')
  await sleep(1000)
  console.log('1秒后执行')
})

// 定义诗词消息的类型
interface PoetryMessage {
  id: string
  content: string
  origin: string
  author: string
  category: string
}
// 数据
// 使用类型声明初始化 reactive 数组
let messageList = reactive<PoetryMessage[]>([])

// 注意：这里 setInterval 每秒执行一次，但你开了 5 个定时器，会导致重复请求！
// 我们先修复类型问题，再顺带优化逻辑。
for (let i = 0; i < 3; i++) {
  getData()
}

// 获取到列表数据
async function getData() {
  axios
    .get('https://v1.jinrishici.com/all.json')
    .then((response) => {
      const data = response.data
      const message: PoetryMessage = {
        id: nanoid(),
        content: data.content,
        origin: data.origin,
        author: data.author,
        category: data.category,
      }
      messageList.push(message)
    })
    .catch((error) => {
      console.error('获取诗词失败:', error)
    })
  // 睡眠1秒钟
  await sleep(3000)
}

onUnmounted(() => {
  console.log('News 组件卸载了！')
})
</script>

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="mes of messageList" :key="mes.id">
        <!-- <a href="#">{{ message.origin }}</a>-->
        <!-- 第一种写法：跳转并携带 params 参数【to的字符串写法】 -->
        <!-- <RouterLink
          :to="`/news/detail/${mes.id}/${mes.content}/${mes.origin}/${mes.author}/${mes.category}`"
        >
          {{ mes.origin }}
        </RouterLink>-->

        <!-- 第二种写法，对象写法传参。其中params参数的话，请求该路由需要使用name命名路由，而不能使用path -->
        <RouterLink
          :to="{
            name: 'detail',
            params: {
              id: mes.id,
              content: mes.content,
              origin: mes.origin,
              author: mes.author,
              category: mes.category,
            },
          }"
          >{{ mes.origin }}</RouterLink
        >
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /*list-style: none;*/
  padding-left: 10px;
}
.news li > a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967e;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>
